<!-- antv -->
<template>
  <div id="container"></div>
</template>

<script lang="ts" setup>
import G6 from '@antv/g6';

const data = {
  nodes: [
    { id: 'node1', x: 50, y: 100, type: 'diamond', color: 'blue' }, // 最简单的
    {
      id: 'node2',
      x: 150,
      y: 100,
      type: 'diamond',
      color: 'blue',
      size: [50, 100]
    }, // 新增宽高
    { id: 'node3', x: 250, y: 100, color: 'red', type: 'diamond' }, // 新增颜色
    {
      id: 'node4',
      x: 350,
      y: 100,
      label: '菱形',
      type: 'diamond',
      color: 'red'
    } // 附加文本
  ]
};
let graph: any;
const init = (data) => {
  G6.registerNode('diamond', {
    draw(cfg?, group?) {
      const keyShape = group?.addShape('path', {
        attrs: {
          path: this.getPath(cfg),
          stroke: cfg?.color
        },
        name: 'path-shape',
        draggable: true
      });
      if (cfg?.label) {
        const label = group.addShape('text', {
          // attrs: style
          attrs: {
            x: 0, // 居中
            y: 0,
            textAlign: 'center',
            textBaseline: 'middle',
            text: cfg.label,
            fill: '#666'
          },
          // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性
          name: 'text-shape',
          // 设置 draggable 以允许响应鼠标的图拽事件
          draggable: true
        });
      }
      return keyShape;
    },
    getPath(cfg) {
      const size = cfg.size || [40, 40]; // 如果没有 size 时的默认大小
      const width = size[0];
      const height = size[1];
      //  / 1 \
      // 4     2
      //  \ 3 /
      const path = [
        ['M', 0, 0 - height / 2], // 上部顶点
        ['L', width / 2, 0], // 右侧顶点
        ['L', 0, height / 2], // 下部顶点
        ['L', -width / 2, 0], // 左侧顶点
        ['Z'] // 封闭
      ];
      return path;
    }
  });

  graph = new G6.Graph({
    container: 'container',
    width: 500,
    height: 500
  });
  graph.data(data);
  graph.render();
};

// 监听鼠标进入节点事件

// const render = (data: any) => {
//   graph.data(data);
//   graph.render();
// };

onMounted(() => {
  init(data);
  // render(data);
});
</script>

<style lang="less" scoped>
#aaaaa {
}
</style>
